<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑酷小游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: Arial, sans-serif;
        }
        
        #gameContainer {
            position: relative;
            border: 2px solid #333;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        
        #gameCanvas {
            display: block;
            background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 100%);
        }
        
        #gameInfo {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 20px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        
        #gameOver {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            display: none;
        }
        
        #restartBtn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        #restartBtn:hover {
            background: #45a049;
        }
        
        #instructions {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 14px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <canvas id="gameCanvas" width="800" height="400"></canvas>
        <div id="gameInfo">
            <div>得分: <span id="score">0</span></div>
            <div>最高分: <span id="highScore">0</span></div>
        </div>
        <div id="gameOver">
            <h2>游戏结束!</h2>
            <p>最终得分: <span id="finalScore">0</span></p>
            <button id="restartBtn" onclick="restartGame()">重新开始</button>
        </div>
        <div id="instructions">按空格键或点击屏幕跳跃</div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // 游戏状态
        let gameRunning = true;
        let score = 0;
        let highScore = localStorage.getItem('highScore') || 0;
        let gameSpeed = 5;
        
        // 玩家对象
        const player = {
            x: 100,
            y: 300,
            width: 40,
            height: 40,
            velocityY: 0,
            jumping: false,
            grounded: true,
            color: '#FF6B6B'
        };
        
        // 障碍物数组
        let obstacles = [];
        
        // 地面
        const ground = {
            y: 340,
            height: 60
        };
        
        // 重力
        const gravity = 0.8;
        const jumpPower = -15;
        
        // 更新最高分显示
        document.getElementById('highScore').textContent = highScore;
        
        // 创建障碍物
        function createObstacle() {
            const types = [
                { width: 30, height: 50, color: '#8B4513' },
                { width: 40, height: 40, color: '#654321' },
                { width: 25, height: 60, color: '#A0522D' }
            ];
            const type = types[Math.floor(Math.random() * types.length)];
            
            obstacles.push({
                x: canvas.width,
                y: ground.y - type.height,
                width: type.width,
                height: type.height,
                color: type.color
            });
        }
        
        // 绘制玩家
        function drawPlayer() {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
            
            // 简单的跑步动画
            const legOffset = Math.sin(Date.now() * 0.01) * 5;
            ctx.fillStyle = '#333';
            ctx.fillRect(player.x + 5, player.y + player.height - 5, 10, 5 + legOffset);
            ctx.fillRect(player.x + 25, player.y + player.height - 5, 10, 5 - legOffset);
        }
        
        // 绘制障碍物
        function drawObstacles() {
            obstacles.forEach(obstacle => {
                ctx.fillStyle = obstacle.color;
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
                
                // 添加简单的纹理
                ctx.fillStyle = 'rgba(0,0,0,0.2)';
                for (let i = 0; i < obstacle.width; i += 5) {
                    ctx.fillRect(obstacle.x + i, obstacle.y, 2, obstacle.height);
                }
            });
        }
        
        // 绘制背景
        function drawBackground() {
            // 天空
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#87CEEB');
            gradient.addColorStop(1, '#98FB98');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 云朵
            ctx.fillStyle = 'rgba(255,255,255,0.8)';
            for (let i = 0; i < 3; i++) {
                const x = (Date.now() * 0.02 + i * 200) % (canvas.width + 100) - 50;
                const y = 50 + i * 30;
                ctx.beginPath();
                ctx.arc(x, y, 20, 0, Math.PI * 2);
                ctx.arc(x + 20, y, 25, 0, Math.PI * 2);
                ctx.arc(x + 40, y, 20, 0, Math.PI * 2);
                ctx.fill();
            }
            
            // 地面
            ctx.fillStyle = '#228B22';
            ctx.fillRect(0, ground.y, canvas.width, ground.height);
            
            // 草地纹理
            ctx.fillStyle = '#006400';
            for (let i = 0; i < canvas.width; i += 10) {
                ctx.fillRect(i, ground.y, 2, 5);
            }
        }
        
        // 碰撞检测
        function checkCollision(rect1, rect2) {
            return rect1.x < rect2.x + rect2.width &&
                   rect1.x + rect1.width > rect2.x &&
                   rect1.y < rect2.y + rect2.height &&
                   rect1.y + rect1.height > rect2.y;
        }
        
        // 更新游戏
        function update() {
            if (!gameRunning) return;
            
            // 更新玩家
            if (player.jumping) {
                player.velocityY += gravity;
                player.y += player.velocityY;
                
                if (player.y >= ground.y - player.height) {
                    player.y = ground.y - player.height;
                    player.jumping = false;
                    player.velocityY = 0;
                    player.grounded = true;
                }
            }
            
            // 更新障碍物
            obstacles.forEach((obstacle, index) => {
                obstacle.x -= gameSpeed;
                
                // 移除屏幕外的障碍物
                if (obstacle.x + obstacle.width < 0) {
                    obstacles.splice(index, 1);
                    score += 10;
                    document.getElementById('score').textContent = score;
                    
                    // 增加游戏速度
                    if (score % 50 === 0) {
                        gameSpeed += 0.5;
                    }
                }
                
                // 碰撞检测
                if (checkCollision(player, obstacle)) {
                    gameOver();
                }
            });
            
            // 随机生成新障碍物
            if (Math.random() < 0.02 && obstacles.length < 3) {
                createObstacle();
            }
        }
        
        // 游戏结束
        function gameOver() {
            gameRunning = false;
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('highScore', highScore);
                document.getElementById('highScore').textContent = highScore;
            }
            document.getElementById('finalScore').textContent = score;
            document.getElementById('gameOver').style.display = 'block';
        }
        
        // 重新开始游戏
        function restartGame() {
            gameRunning = true;
            score = 0;
            gameSpeed = 5;
            obstacles = [];
            player.y = ground.y - player.height;
            player.velocityY = 0;
            player.jumping = false;
            document.getElementById('score').textContent = '0';
            document.getElementById('gameOver').style.display = 'none';
        }
        
        // 跳跃
        function jump() {
            if (gameRunning && player.grounded && !player.jumping) {
                player.jumping = true;
                player.grounded = false;
                player.velocityY = jumpPower;
            }
        }
        
        // 游戏循环
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            drawBackground();
            drawPlayer();
            drawObstacles();
            update();
            
            requestAnimationFrame(gameLoop);
        }
        
        // 事件监听
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                e.preventDefault();
                jump();
            }
        });
        
        canvas.addEventListener('click', () => {
            jump();
        });
        
        // 触摸支持
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            jump();
        });
        
        // 启动游戏
        gameLoop();
    </script>
</body>
</html>
